<template>
    <header>
        <slot name="back">
            <img src="@/assets/back.svg" @click="goback" />
        </slot>

        <slot name="title">
            <span>宝石商人</span>
        </slot>

        <slot name="right">
            <span class="placeholders" />
        </slot>
    </header>
</template>
<script setup lang="ts">
const router = useRouter();

const goback = () => {
    router.back();
};
</script>
<style scoped lang="less">
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 20px;
    font-size: 88px;
    font-weight: bold;

    img {
        width: 88px;
        height: 88px;
    }

    .placeholders {
        width: 88px;
        height: 88px;
    }
}
</style>
